<template>
  <div class="search-panel" v-if="state.isShowSearchPanel">
    <div class="content" ref="content">
      <div class="control" ref="control">
        <slot name="searchSlot"></slot>
      </div>

      <div class="button-list">
        <v-button type="primary" @click="searchClick" text="搜索"></v-button>
        <v-button
            type="primary"
            @click="resetClick"
            :text="resetName"
        ></v-button>
      </div>
    </div>

    <div class="footer" v-if="state.footerVisible">
      <img
          :src="state.isExpand ? state.closeIcon : state.openIcon"
          @click="statusChange"
      />
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue'
import closeIcon from './images/close.png'
import openIcon from './images/open.png'
interface SearchPanelProps {
  resetName?: string
}
const { resetName } = withDefaults(defineProps<SearchPanelProps>(), {
  resetName: '重置'
})
const $emit = defineEmits()
const resetClick = () => {
  $emit('resetData')
}

const searchClick = () => {
  $emit('searchData')
}

const state = reactive({
  isExpand: false,
  closeIcon,
  openIcon,
  footerVisible: false,
  isShowSearchPanel: true
})

const control = ref(null)
const content = ref(null)

onMounted(() => {
  // console.log((control.value as any).offsetHeight)
  // console.log((document.querySelector('.search-panel .control') as any).offsetHeight)
  if (!control.value) {
    state.isShowSearchPanel = false
  } else {
    // if ((control.value as any).offsetHeight > 32) {
    //   state.footerVisible = true
    // } else {
    //   state.footerVisible = false
    // }
    // controlChange(false)
  }
})

const statusChange = () => {
  state.isExpand = !state.isExpand
  controlChange(state.isExpand)
}

const controlChange = (isExpand: boolean) => {
  if (isExpand) {
    // (control.value as any).style.height = 85 + 'px';
    // (content.value as any).style.paddingBottom = 0
  } else {
    // (control.value as any).style.height = 33 + 'px';
    // (content.value as any).style.paddingBottom = 20 + 'px'
  }
}
</script>
<style lang="scss">
.search-panel {
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  width: 100%;

  .content {
    display: flex;
    padding: 20px;
    justify-content: space-between;

    .control {
      width: 85%;
      font-size: 14px;
      font-weight: 400;
      // height: 33px;
      overflow-y: auto;
      .v-control {
        display: inline-block;
        margin-right: 24px;
        //margin-bottom: 14px;
      }
    }
  }

  .footer {
    display: flex;
    justify-content: center;
    border-bottom: 1px dashed #d3dbeb;
    // margin-bottom: 24px;
    img {
      width: 54px;
      height: 17px;
      cursor: pointer;
    }
  }
}
</style>
